<template>
	<div class="system-menu-container">
		<div class="breadcrumb-box">
			<Breadcrumb />
		</div>

		<div class="page-main flex space-between">
			<div class="page-l">
				<div class="common-title">
					日期选择
				</div>
				<el-calendar ref="calendar" v-model="state.selectDate">
					<template #header="{ date }">
						<span>{{ date }}</span>
						<el-button-group>
							<el-button size="small" @click="changeDate('prev-year')">
								上一年
							</el-button>
							<el-button size="small" @click="changeDate('prev-month')">
								上一月
							</el-button>
							<el-button size="small" @click="changeDate('today')">今日</el-button>
							<el-button size="small" @click="changeDate('next-month')">
								下一月
							</el-button>
							<el-button size="small" @click="changeDate('next-year')">
								下一年
							</el-button>
						</el-button-group>
					</template>
					<template #date-cell="{ data }">
						<div class="date-box" @click="hanleCalendarClick(data)">
							<div class="count-box">
								<span v-for="(v,k) in state.calendarObj">
									<span class="count" v-if="k == formatDate(data.date)">{{ v }}</span>
								</span>
							</div>
							<div class="day-box" :class="data.isSelected ? 'is-selected' : ''" >
								{{ formatToDay(data.date) }}
							</div>
						</div>
						
					</template>
				</el-calendar>
			</div>
			<div class="page-r" >
				<div class="common-title">
					手术安排
				</div>
				<div class="select-date-box flex justify-end align-center">
					<span style="color:#999;">当前选择日期：</span>
					 {{ formatDate(state.selectDate) }}
				</div>
				<el-empty v-if="state.opData.list.length == 0" description="暂无手术安排" />

				<div class="op-list" v-loading="state.opData.loading">
					<el-scrollbar >
						<div class="op-item flex space-between" v-for="(item,index) in state.opData.list" :key="index" >
							<div class="item-left">
								<img :src="icon" alt="">
								<div class="name">{{ item.patientRecord.patient.name }}</div>
							</div>
							<div class="item-right">
								<div class="des-item">
									年龄：{{ item.patientRecord.age }}
								</div>
								<div class="des-item">
									床号：{{ item.patientRecord.hospitalBed ? item.patientRecord.hospitalBed.number:'-' }}
								</div>
								<div class="des-item ellipsis ">
									<el-tooltip class="box-item" effect="dark" :content="item.patientRecord.preDiagnosis"
										:placement="top">
										<span class="">诊断：{{ item.patientRecord ?item.patientRecord.preDiagnosis:'-'}}</span>
									</el-tooltip>
								</div>
								<div class="des-item">
									主刀：{{ item.chiefDoctor?item.chiefDoctor:'-' }}
								</div>
								<div class="des-item ellipsis" >
									<el-tooltip class="box-item" effect="dark" :content="item.realityOperation?item.realityOperation:'-'"
										:placement="top">
										<span class="">术式：{{ item.realityOperation?item.realityOperation:'-' }}</span>
									</el-tooltip>
								</div>
								<div class="des-item">
									麻醉：{{ item.anesthesiaMod ?item.anesthesiaMod:'-' }}
								</div>
								<div class="des-item">
									时间：{{ item.operationAt }}
								</div>
								<div class="des-item">
									台次：{{ item.num ? item.num:'-'}}
								</div>
								<div class="des-item">
									登记号：{{ item.patientRecord?item.patientRecord.serialNumber:'-' }}
								</div>

							</div>
						</div>
					</el-scrollbar>
					
				</div>
			</div>
		</div>

		
	</div>
</template>

<script setup name="dsProcess-calendar">
import dayjs from "dayjs";
import { calendarApi } from '/@/api/ds/calendar'
import { transListToObj } from '/@/utils/arrayOperation'
import icon from '/@/assets/meow.png';
// 引入组件
const Breadcrumb = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/breadcrumb.vue'));

// 定义变量内容
const state = reactive({
	opData: {
		list: [],
		loading: false,
	},
	selectDate: null,
	calendarObj: {
		
	}
});

const calendar = ref()
const changeDate = (val) => {
  calendar.value.selectDate(val)
}






// 页面加载时
onMounted(() => {
	state.selectDate = new Date()
});

const formatDate = (value) => {
	return dayjs(value).format("YYYY-MM-DD")
}

const formatToDay = (value) => {
	return dayjs(value).format("D")
}



const hanleCalendarClick = (value) => {
	// getOpData()
}

// 获取日历上的数字显示
const getNumData = () => {
	const apiData = {
		operationAt: dayjs(state.selectDate).format("YYYY-MM"),
		type: 0
	}
	calendarApi().dateNum(apiData).then(res=> {
		state.calendarObj = transListToObj(res.data,'operationAt','total')
	})
}

// 获取手术列表
const getOpData = () => {
	state.opData.loading = true
	const apiData = {
		operationAt: dayjs(state.selectDate).format("YYYY-MM-DD"),
	}
	calendarApi().opList(apiData).then(res=> {
		state.opData.loading = false
		state.opData.list = res.data.items
	})
}


watch(
	() => state.selectDate,
	() => {
		getNumData()
		getOpData()
	}
);

</script>

<style lang="scss" scoped>
.page-main{
	width: 100%;
	height: calc(100vh  - 100px);


	.page-l,.page-r{
		padding: 20px;
		background-color: #fff;
		border-radius: 10px;
	}
	.page-l{
		width: 45%;
		height: 100%;
		.date-box{
			position: relative;
			width: 100%;
			height: 100%;
			.day-box{
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				text-align: right;
				font-size: 15px;
				&.is-selected{
					color: #1989fa;
				}
			}
			.count-box{
				.count{
					display: block;
					text-align: center;
					width: 25px;
					color: #FF5353;
					border: 1px solid #FF5353;
					border-radius: 10px;
				}
			}
		}
	}
	.page-r{
		width: 53.5%;
		height: 100%;
		.select-date-box{
			border-bottom: 1px solid #ebf5ff;
			padding: 13px 0;
		}

		.op-list{
			height: calc(100% - 70px);
			padding-top: 20px;
			.op-item{
				
				width: 100%;
				height: 170px;
				border: 1px solid #DFDFDF;
				border-radius: 8px;
				padding: 35px 0 35px 20px;
				margin-bottom: 20px;
				.item-left{
					// padding: 15px 10px;
					img{
						width: 60px;
						height: 60px;
						border-radius: 60px;
		
					}
					.name{
						color: #3081F4;
						font-size: 18px;
						margin-top: 15px;
						text-align: center;
					}
				}
				.item-right{
					width: calc(100% - 90px);
					display: grid;
					grid-template-columns: 1fr 1fr 1fr;
					gap: 15px;
					padding-top: 10px;
				}
			}
		}
	}


}

</style>
